//

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:yp/Xwidgets/cache_image.dart';
import 'package:yp/helper.dart';
import 'package:yp/router.dart';

import 'logic.dart';
import 'state.dart';

class PingJiaShaiDanDetailsPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _PingJiaShaiDanDetailsPage();
  }
}

class _PingJiaShaiDanDetailsPage extends State<PingJiaShaiDanDetailsPage> {
  final PingJiaShaiDanDetailsLogic logic =
      Get.put(PingJiaShaiDanDetailsLogic());
  final PingJiaShaiDanDetailsState state =
      Get.find<PingJiaShaiDanDetailsLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        elevation: 0,
        backgroundColor: Colors.white,
        title: Text(
          '评价晒单',
          style: TextStyle(
            color: Color(0xff030303),
            fontSize: 17,
          ),
        ),
        iconTheme: IconThemeData(
          color: Color(0xff030303),
        ),
        actions: [
          if (state.commentsList.length > 0)
            GestureDetector(
              onTap: () {
                print('==== 提交 ==== 点击事件 ==== 事件 ====');
              },
              behavior: HitTestBehavior.opaque,
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: setWidth(20)),
                alignment: Alignment.center,
                child: Text(
                  '提交',
                  style: TextStyle(
                    color: Color(0xffEA5504),
                    fontSize: 15,
                  ),
                ),
              ),
            ),
        ],
      ),
      body: GetBuilder<PingJiaShaiDanDetailsLogic>(
        builder: (logic) {
          return Container(
            color: Color(0xffF5F5F5),
            child: ListView.separated(
              scrollDirection: Axis.vertical,
              padding: EdgeInsets.only(
                bottom: setWidth(20),
              ),
              itemBuilder: (context, index) {
                // if (index == 0) {
                //   return _storeEvaluationWidget();
                // } else {
                //   return  _itemWidget(index: index);
                // }
                return _itemWidget(index: index);
              },
              separatorBuilder: (BuildContext context, int index) {
                return SizedBox(
                  height: setWidth(20),
                );
              },
              itemCount: state.commentsList.length > 0 ? 1 : 0,
            ),
          );
        },
      ),
    );
  }

  // 店铺评价
  Widget _storeEvaluationWidget() {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.only(
        left: setWidth(20),
        top: setWidth(28),
        right: setWidth(20),
        bottom: setWidth(48),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '店铺评价',
            style: TextStyle(
              color: Color(0xff222222),
              fontSize: 14,
            ),
          ),
          Padding(
            padding: EdgeInsets.only(
              top: setWidth(26),
              bottom: setWidth(34),
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text(
                  '物流服务',
                  style: TextStyle(
                    color: Color(0xff666666),
                    fontSize: 14,
                  ),
                ),
                SizedBox(
                  width: setWidth(20),
                ),
                Wrap(
                  spacing: setWidth(20),
                  children: ['', '', '', '', '']
                      .asMap()
                      .map((key, value) {
                        return MapEntry(
                          key,
                          Container(
                            width: setWidth(52),
                            height: setWidth(52),
                            color: Colors.red.withOpacity(0.5),
                          ),
                        );
                      })
                      .values
                      .toList(),
                ),
                SizedBox(
                  width: setWidth(20),
                ),
                Text(
                  '好评',
                  style: TextStyle(
                    color: Color(0xffEA5504),
                    fontSize: 14,
                  ),
                ),
              ],
            ),
          ),
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Text(
                '服务态度',
                style: TextStyle(
                  color: Color(0xff666666),
                  fontSize: 14,
                ),
              ),
              SizedBox(
                width: setWidth(20),
              ),
              Wrap(
                spacing: setWidth(20),
                children: ['', '', '', '', '']
                    .asMap()
                    .map((key, value) {
                      return MapEntry(
                        key,
                        Container(
                          width: setWidth(52),
                          height: setWidth(52),
                          color: Colors.red.withOpacity(0.5),
                        ),
                      );
                    })
                    .values
                    .toList(),
              ),
              SizedBox(
                width: setWidth(20),
              ),
              Text(
                '好评',
                style: TextStyle(
                  color: Color(0xffEA5504),
                  fontSize: 14,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  // 评论信息
  Widget _itemWidget({
    int index,
  }) {
    int resultNum = int.parse(
        state.commentsList[index]['sd_sysrate_traderate']['result'].toString());
    int serviceAttitudeNum = int.parse(state.commentsList[index]
            ['sd_sysrate_traderate']['customer_service']
        .toString()); // 客服
    int logisticsServiceNum = int.parse(state.commentsList[index]
            ['sd_sysrate_traderate']['logistics_type']
        .toString()); //物流
    List imagesList = [];
    if (state.commentsList[index]['sd_sysrate_traderate']['list_video'] != '') {
      String imagesStr =
          state.commentsList[index]['sd_sysrate_traderate']['list_video'];
      imagesList = imagesStr.split(',');
    }
    List imagesList2 = [];
    if (state.commentsList[index]['sd_sysrate_traderate']['rate_pic'] != '') {
      String imagesStr =
          state.commentsList[index]['sd_sysrate_traderate']['rate_pic'];
      imagesList2 = imagesStr.split(',');
    }
    if (imagesList2.length > 0) {
      imagesList.addAll(imagesList2);
    }
    List appends =
        state.commentsList[index]['sd_sysrate_traderate']['appends'] ?? [];
    // 追评
    List appendImagesList = [];
    List appendsList =
        state.commentsList[index]['sd_sysrate_traderate']['appends'];
    if (appendsList.length > 0) {
      if (state.commentsList[index]['sd_sysrate_traderate']['appends'][0]
              ['append_rate_pic'] !=
          '') {
        String imageUrl = state.commentsList[index]['sd_sysrate_traderate']
            ['appends'][0]['append_rate_pic'];
        appendImagesList = imageUrl.split(',');
      }
    }

    return Container(
      color: Colors.white,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 商品信息
          Padding(
            padding: EdgeInsets.only(
              left: setWidth(22),
              top: setWidth(20),
              right: setWidth(22),
              bottom: setWidth(36),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                CachedImage(
                  width: setWidth(100),
                  height: setWidth(100),
                  margin: EdgeInsets.zero,
                  scale: BoxFit.fill,
                  path: state.commentsList[index]['item_picture'],
                ),
                SizedBox(
                  width: setWidth(18),
                ),
                Expanded(
                  child: Container(
                    height: setWidth(100),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          state.commentsList[index]['item_name'] ?? '',
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                            color: Color(0xff222222),
                            fontSize: 14,
                          ),
                        ),
                        Row(
                          children: [
                            Wrap(
                              spacing: setWidth(20),
                              children: ['', '', '', '', '']
                                  .asMap()
                                  .map((key, value) {
                                    return MapEntry(
                                      key,
                                      Container(
                                        width: setWidth(52),
                                        height: setWidth(52),
                                        alignment: Alignment.center,
                                        child: resultNum > key
                                            ? Image.asset(
                                                'assets/images/fivePointedStar_image.png',
                                                width: setWidth(50),
                                                height: setWidth(50),
                                                fit: BoxFit.fill,
                                              )
                                            : Image.asset(
                                                'assets/images/fivePointedStarGray_image.png',
                                                width: setWidth(50),
                                                height: setWidth(50),
                                                fit: BoxFit.fill,
                                              ),
                                      ),
                                    );
                                  })
                                  .values
                                  .toList(),
                            ),
                            SizedBox(
                              width: setWidth(20),
                            ),
                            Text(
                              resultNum < 3
                                  ? '差评'
                                  : resultNum < 5
                                      ? '中评'
                                      : '好评',
                              style: TextStyle(
                                color: Color(0xffEA5504),
                                fontSize: 14,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
          Divider(
            height: setWidth(1),
            indent: setWidth(22),
            endIndent: 0,
          ),
          // 服务 物流 评级
          Container(
            padding: EdgeInsets.symmetric(
                horizontal: setWidth(20), vertical: setWidth(20)),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: EdgeInsets.only(
                    top: setWidth(6),
                    bottom: setWidth(20),
                  ),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Text(
                        '服务态度',
                        style: TextStyle(
                          color: Color(0xff666666),
                          fontSize: 14,
                        ),
                      ),
                      SizedBox(
                        width: setWidth(20),
                      ),
                      Wrap(
                        spacing: setWidth(20),
                        children: ['', '', '', '', '']
                            .asMap()
                            .map((key, value) {
                              return MapEntry(
                                key,
                                Container(
                                  //
                                  width: setWidth(52),
                                  height: setWidth(52),
                                  alignment: Alignment.center,
                                  child: serviceAttitudeNum > key
                                      ? Image.asset(
                                          'assets/images/fivePointedStar_image.png',
                                          width: setWidth(50),
                                          height: setWidth(50),
                                          fit: BoxFit.fill,
                                        )
                                      : Image.asset(
                                          'assets/images/fivePointedStarGray_image.png',
                                          width: setWidth(50),
                                          height: setWidth(50),
                                          fit: BoxFit.fill,
                                        ),
                                ),
                              );
                            })
                            .values
                            .toList(),
                      ),
                      SizedBox(
                        width: setWidth(20),
                      ),
                      Text(
                        serviceAttitudeNum < 3
                            ? '差评'
                            : serviceAttitudeNum < 5
                                ? '中评'
                                : '好评',
                        style: TextStyle(
                          color: Color(0xffEA5504),
                          fontSize: 14,
                        ),
                      ),
                    ],
                  ),
                ),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Text(
                      '物流服务',
                      style: TextStyle(
                        color: Color(0xff666666),
                        fontSize: 14,
                      ),
                    ),
                    SizedBox(
                      width: setWidth(20),
                    ),
                    Wrap(
                      spacing: setWidth(20),
                      children: ['', '', '', '', '']
                          .asMap()
                          .map((key, value) {
                            return MapEntry(
                              key,
                              Container(
                                width: setWidth(52),
                                height: setWidth(52),
                                alignment: Alignment.center,
                                child: logisticsServiceNum > key
                                    ? Image.asset(
                                        'assets/images/fivePointedStar_image.png',
                                        width: setWidth(50),
                                        height: setWidth(50),
                                        fit: BoxFit.fill,
                                      )
                                    : Image.asset(
                                        'assets/images/fivePointedStarGray_image.png',
                                        width: setWidth(50),
                                        height: setWidth(50),
                                        fit: BoxFit.fill,
                                      ),
                              ),
                            );
                          })
                          .values
                          .toList(),
                    ),
                    SizedBox(
                      width: setWidth(20),
                    ),
                    Text(
                      logisticsServiceNum < 3
                          ? '差评'
                          : logisticsServiceNum < 5
                              ? '中评'
                              : '好评',
                      style: TextStyle(
                        color: Color(0xffEA5504),
                        fontSize: 14,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.only(
              left: setWidth(22),
              top: setWidth(30),
              right: setWidth(22),
              bottom: setWidth(28),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Offstage(
                  offstage: (state.commentsList[index]['sd_sysrate_traderate']
                              ['content'] ??
                          '') ==
                      '',
                  child: Text(
                    state.commentsList[index]['sd_sysrate_traderate']
                            ['content'] ??
                        '',
                    style: TextStyle(
                      color: Color(0xff2B2B2B),
                      fontSize: 12,
                    ),
                  ),
                ),
                Offstage(
                  offstage: imagesList.length == 0,
                  child: Column(
                    children: [
                      Offstage(
                        offstage: (state.commentsList[index]
                                    ['sd_sysrate_traderate']['content'] ??
                                '') ==
                            '',
                        child: SizedBox(
                          height: setWidth(20),
                        ),
                      ),
                      Wrap(
                        spacing: setWidth(20),
                        children: imagesList
                            .asMap()
                            .map((key, value) {
                              // children: ['', '', ''].asMap().map((key, value) {
                              return MapEntry(
                                key,
                                CachedImage(
                                  width: setWidth(100),
                                  height: setWidth(100),
                                  margin: EdgeInsets.zero,
                                  scale: BoxFit.fill,
                                  path: value,
                                ),
                              );
                            })
                            .values
                            .toList(),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Offstage(
            offstage:
                state.commentsList[index]['sd_sysrate_traderate']['anony'] != 1,
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: setWidth(22)),
              child: Column(
                children: [
                  Text(
                    '已匿名评价',
                    style: TextStyle(
                      color: Color(0xff999999),
                      fontSize: 12,
                    ),
                  ),
                  SizedBox(
                    height: setWidth(20),
                  ),
                ],
              ),
            ),
          ),
          // Offstage(
          //   offstage: index % 2 != 0,
          //   child: Padding(
          //     padding: EdgeInsets.only(
          //       left: setWidth(20),
          //       top: setWidth(20),
          //       right: setWidth(20),
          //     ),
          //     child: Container(
          //       padding: EdgeInsets.symmetric(horizontal: setWidth(24), vertical: setWidth(26)),
          //       color: Color(0xffF7F7F7),
          //       child: Column(
          //         crossAxisAlignment: CrossAxisAlignment.start,
          //         children: [
          //           Row(
          //             mainAxisAlignment: MainAxisAlignment.spaceBetween,
          //             children: [
          //               Text(
          //                 '客服回复：',
          //                 style: TextStyle(
          //                   color: Color(0xff222222),
          //                   fontSize: 14,
          //                   fontWeight: FontWeight.bold,
          //                 ),
          //               ),
          //               Text(
          //                 '2019年7月6日 12:23:16',
          //                 style: TextStyle(
          //                   color: Color(0xffAAAAAA),
          //                   fontSize: 11,
          //                 ),
          //               ),
          //             ],
          //           ),
          //           Text(
          //             '感谢您对本产品的大力支持和厚爱，希望您的皮肤越来越光洁丝滑，祝您购物愉快么么哒～',
          //             style: TextStyle(
          //               color: Color(0xff222222),
          //               fontSize: 12,
          //             ),
          //           ),
          //         ],
          //       ),
          //     ),
          //   ),
          // ),
          // SizedBox(
          //   height: setWidth(20),
          // ),
          Divider(
            height: setWidth(1),
            indent: setWidth(22),
            endIndent: 0,
          ),
          appends.length > 0
              ? Padding(
                  padding: EdgeInsets.only(
                    left: setWidth(22),
                    top: setWidth(30),
                    right: setWidth(22),
                    bottom: setWidth(40),
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        '追评',
                        style: TextStyle(
                          color: Color(0xffEA5504),
                          fontSize: 12,
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(
                          top: setWidth(22),
                          bottom:
                              appendImagesList.length > 0 ? setWidth(20) : 0,
                        ),
                        child: Text(
                          state.commentsList[index]['sd_sysrate_traderate']
                              ['appends'][0]['append_content'],
                          style: TextStyle(
                            color: Color(0xff222222),
                            fontSize: 12,
                          ),
                        ),
                      ),
                      Wrap(
                        spacing: setWidth(20),
                        children: appendImagesList
                            .asMap()
                            .map((key, value) {
                              return MapEntry(
                                key,
                                CachedImage(
                                  width: setWidth(100),
                                  height: setWidth(100),
                                  margin: EdgeInsets.zero,
                                  scale: BoxFit.fill,
                                  path: value,
                                ),
                              );
                            })
                            .values
                            .toList(),
                      ),
                    ],
                  ),
                )
              : Container(
                  height: setWidth(80),
                  padding: EdgeInsets.symmetric(horizontal: setWidth(22)),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      InkWell(
                        onTap: () {
                          print('追加评论点击事件！！！');
                          Map<String, dynamic> dataMap = {
                            'tml_num_id': state.orderMap['tml_num_id'], // 订单号
                            'rate_id': state.commentsList[index]
                                ['sd_sysrate_traderate']['rate_id'],
                            'shop_id': state.orderMap['ec_shop_num_id'],
                            'goodsUrl': state.commentsList[index]
                                ['item_picture'],
                            'titleStr':
                                state.commentsList[index]['item_name'] ?? '',
                          };
                          Get.toNamed(RouteConfig.followUpEvaluation,
                                  arguments: dataMap)
                              .then((value) {
                            logic.requestData();
                          });
                        },
                        child: Container(
                          width: setWidth(140),
                          height: setWidth(44),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(setWidth(40)),
                            border: Border.all(
                              width: setWidth(1),
                              color: Color(0xffEA5504),
                            ),
                          ),
                          alignment: Alignment.center,
                          child: Text(
                            '追加',
                            style: TextStyle(
                              color: Color(0xffEA5504),
                              fontSize: 10,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
        ],
      ),
    );
  }
}
